<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card" shadow>
      <!-- 头部功能 -->
      <template #header>
        <div>
          <el-button type="primary" @click="addSortVisible = true"
            >添加分类</el-button
          >
          <el-dialog title="分类添加" :visible.sync="addSortVisible">
            <el-form :model="sort" ref="addSortForm" :rules="$rules.role">
              <el-form-item
                prop="attr_name"
                label="分类名称"
                :label-width="formLabelWidth"
              >
                <el-input v-model="sort.attr_sel"> </el-input>
              </el-form-item>
              <el-form-item
                prop="attr_sel"
                label="父级分类"
                :label-width="formLabelWidth"
              >
                <el-select
                  v-model="sort.attr_sel"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="addSortVisible = false">取 消</el-button>
              <el-button type="primary" @click="addSortList()">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </template>
      <!-- 正文内容 -->
      <el-table
        :data="sorts"
        v-loading="loading"
        row-key="cat_id"
        :tree-props="{ children: 'children' }"
      >
        <el-table-column label="序号" width="50" type="index">
        </el-table-column>
        <el-table-column prop="cat_name" label="分类名称"> </el-table-column>
        <el-table-column prop="cat_deleted" label="是否有效" #default="{ row }">
          <i
            class="tip"
            :class="row.cat_deleted ? 'el-icon-error' : 'el-icon-success'"
          ></i>
        </el-table-column>
        <el-table-column prop="cat_level" label="级别" #default="{ row }">
          <el-tag v-show="row.cat_level == 0" size="mini"> 一级 </el-tag>
          <!-- effect="dark" -->
          <el-tag v-show="row.cat_level == 1" size="mini" type="success">
            二级
          </el-tag>
          <el-tag v-show="row.cat_level == 2" size="mini" type="warning">
            三级
          </el-tag>
        </el-table-column>
        <el-table-column label="操作" width="300" #default="{ row }">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            class="updateRole"
            @click="updateUserData(row)"
            >编辑</el-button
          >
          <el-dialog title="修改用户" :visible.sync="updateRoleVisible">
            <el-form :model="sort" ref="updateRolesForm" :rules="$rules.sort">
              <el-form-item
                prop="attr_name"
                label="分类名称"
                :label-width="formLabelWidth"
              >
                <el-input v-model="sort.roleName" disabled> </el-input>
              </el-form-item>
              <el-form-item
                prop="attr_sel"
                label="父级分类"
                :label-width="formLabelWidth"
              >
                <el-input v-model="sort.roleDesc"> </el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="updateRoleVisible = false">取 消</el-button>
              <el-button type="primary" @click="modifyRolesById()"
                >确 定</el-button
              >
            </div>
          </el-dialog>

          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="removeRolesrById(row.id)"
            >删除</el-button
          >
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
        @size-change="reloadUserlistSize"
        @current-change="reloadUserlistPage"
        :current-page="pagenum"
      >
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
import ZkTable from "vue-table-with-tree-grid";
export default {
  components: { ZkTable },
  data() {
    return {
      columns: [{ label: "分类名称", prop: "cat_name" }],
      sorts: [],
      sort: {
        attr_name: "",
        attr_sel: "",
      },
      addSortVisible: false,
      updateRoleVisible: false,
      formLabelWidth: "100px",
      loading: false,
      total: 16, //总页数
      pagesize: 5, //页面数据调
      pagenum: 1, //当前页码
      query: "", //加载页面条件限制参数
    };
  },
  methods: {
    //刷新页面数据
    async initSortsList() {
      try {
        this.loading = true;
        let sorts = await this.$api.getSortsList({
          query: this.query,
          pagenum: this.pagenum,
          pagesize: this.pagesize,
        });
        this.sorts = sorts.result;
        this.total = sorts.total;
        this.pagenum = parseInt(sorts.pagenum); // 这行代码可以定义也可以不定义，主要为保证和后端服务器结果同步
        if (sorts == "error") return;
        console.log(222222, sorts);
      } catch (error) {
        console.log("RoleView-initSortsList-error:", error);
      } finally {
        this.loading = false;
      }
    },
    //添加分类
    async addSortList() {
      try {
        //表单的清空????
        this.addSortVisible = false;
        await this.$refs.rolesForm.validate(); //对$rolesForm(该表单的输入值)进行校验
        let data = await this.$api.addSortList(this.role);
        console.log(111, data);
        if (data == "error") return;
        this.$message.success("添加成功");
        this.initSortsList();
      } catch (error) {
        console.log("RoleView-addSortList-error:", error);
      }
    },
    //编辑角色信息
    async modifyRolesById() {
      let params = {
        roleName: this.role.roleName,
        roleDesc: this.role.roleDesc,
      };
      try {
        // console.log(11222, this.role);
        let data = await this.$api.updateRoleList(this.role.id, params);
        // console.log(12345, data);
        if (data == "error") return;
        this.$message.success("编辑成功");
        this.updateRoleVisible = false;
        this.initSortsList();
      } catch (error) {
        console.log("UserView-modifyUserById-error:", error);
      }
      console.log(11);
    },
    //拿到当前点击的按钮的角色id
    updateUserData(role) {
      this.role = {
        id: role.id,
        roleName: role.roleName,
        roleDesc: role.roleDesc,
      };
      this.updateRoleVisible = true;
    },
    //删除角色信息
    async removeRolesrById(id) {
      try {
        let data = this.$api.removeRoleList(id);
        // console.log(22, data);
        if (data == "error") return;
        this.$message.success("删除成功");
        this.initSortsList();
      } catch (error) {
        console.log("RoleView-removeRolesrById-error:", error);
      }
    },
    reloadUserlistSize(newPagePage) {
      // console.log(this.pagenum,newPagePage);
      this.pagesize = newPagePage;
      this.initSortsList();
    },
    //pageSize改变时触发(每一页)
    reloadUserlistPage(newPageNum) {
      // console.log(this.pagenum, newPageNum);
      this.pagenum = newPageNum;
      this.initSortsList();
    },
  },
  created() {
    this.initSortsList();
  },
};
</script>

 <style lang="less" scoped>
.el-button {
  margin: 0;
}
.el-button,
.updateRoles {
  margin-right: 10px;
}
.tip {
  font-size: 18px;
  color: #67c23a;
}
</style>